<template>
  <div class="equip">
    <div>
      <el-form :inline="true" :model="query" size="mini">
        <el-form-item label="">
          <el-input v-model="query.name" placeholder="设备名"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="query.num" placeholder="设备编号"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="query.status" placeholder="设备状态">
            <el-option
              v-for="item in status"
              :key="item"
              :label="item"
              :value="item || ''"
              >{{ item }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="query.level" placeholder="设备等级">
            <el-option
              v-for="item in level"
              :key="item"
              :label="item"
              :value="item || ''"
              >{{ item }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="submitQuery"
            >查询</el-button
          >
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-button
        icon="el-icon-plus"
        type="primary"
        size="mini"
        @click="addequip"
        >添加</el-button
      >
    </div>
    <div>
      <el-table
        :data="tableData"
        v-loading="tableLoading"
        size="small"
        style="width: 100%"
        stripe
        border
      >
        <el-table-column prop="pic" label="图片">
          <template v-slot="scope">
            <el-image
              style="height: 28px; width: 44px"
              :src="scope.row.pic"
              :preview-src-list="[scope.row.pic]"
            >
            </el-image>
            <!-- <img
              :src="scope.row.pic"
              style="height: 20px; width: 20px"
              alt=""
            /> -->
          </template>
        </el-table-column>
        <el-table-column
          prop="num"
          label="设备编号"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="设备名称"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="property"
          label="资产编号"
          width="115"
        ></el-table-column>
        <el-table-column
          prop="sequence"
          label="序列号"
          width="70"
        ></el-table-column>
        <el-table-column prop="type" label="类别" width="120"></el-table-column>
        <el-table-column
          prop="status"
          label="设备状态"
          style="text-align: center"
          width="90"
        >
          <template v-slot="scope">
            <el-tag style="" size="medium" v-if="scope.row.status == '正常'">{{
              scope.row.status
            }}</el-tag>
            <el-tag
              style=""
              size="medium"
              type="danger"
              v-if="scope.row.status == '故障'"
              >{{ scope.row.status }}</el-tag
            >
            <el-tag
              style=""
              size="medium"
              type="warning"
              v-if="scope.row.status == '带病运行'"
              >{{ scope.row.status }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="mode" label="使用状态" width="65">
          <template v-slot="scope">
            <el-tag
              style=""
              size="medium"
              type="success"
              v-if="scope.row.mode == '在用'"
              >{{ scope.row.mode }}</el-tag
            >
            <el-tag
              style=""
              size="medium"
              type="warning"
              v-if="scope.row.mode == '出租'"
              >{{ scope.row.mode }}</el-tag
            >
            <el-tag
              style=""
              size="medium"
              type="info"
              v-if="scope.row.mode == '禁用'"
              >{{ scope.row.mode }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="principal"
          label="负责人"
          width="70"
        ></el-table-column>
        <el-table-column
          prop="trademark"
          label="品牌"
          width="70"
        ></el-table-column>
        <el-table-column
          prop="model"
          label="规格型号"
          width="120"
        ></el-table-column>
        <el-table-column prop="level" label="设备等级">
          <template v-slot="scope">
            <el-tag
              style=""
              size="medium"
              type="danger"
              v-if="scope.row.level == 'A(关键)'"
              >{{ scope.row.level }}</el-tag
            >
            <el-tag
              style=""
              size="medium"
              type="warning"
              v-if="scope.row.level == 'B(重要)'"
              >{{ scope.row.level }}</el-tag
            >
            <el-tag
              style=""
              size="medium"
              type="success"
              v-if="scope.row.level == 'C(一般)'"
              >{{ scope.row.level }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="position"
          label="位置"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="buy_time"
          label="购置时间"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="cost"
          label="采购金额"
          width="90"
        ></el-table-column>
        <el-table-column
          prop="guarantee"
          label="保修时间"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="commission"
          label="启用时间"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="scrap"
          label="预计报废时间"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          width="70"
        ></el-table-column>
        <el-table-column label="操作" width="200">
          <template v-slot="scope">
            <el-button
              size="mini"
              icon="el-icon-edit"
              type="text"
              @click="editequip(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              icon="el-icon-delete"
              type="text"
              @click="deleteequip(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align: right; margin-top: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableDataTotal"
      ></el-pagination>
    </div>

    <el-dialog title="编辑" v-model="editDialogShow" width="30%">
      <el-form
        ref="equipFormRules"
        :rules="equipFormRules"
        :model="equipForm"
        label-width="80px"
        size="mini"
        inline="true"
        :before-close="handleClose"
      >
        <el-form-item label="图片" prop="pic">
          <el-upload
            ref="upload"
            action="http://localhost:7001/api/file"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :auto-upload="false"
            :on-success="handleSuccess"
            :on-change="handlechange"
            :show-file-list="false"
            :limit="0"
          >
            <img
              v-if="dialogImageUrl"
              :src="dialogImageUrl"
              class="avatar"
              style="width: 157px !important; height: 157px !important"
            />
            <i v-else class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="设备编号" prop="num">
          <el-input v-model="equipForm.num" style="width: 157px"></el-input>
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input v-model="equipForm.name" style="width: 157px"></el-input>
        </el-form-item>
        <el-form-item label="资产编号">
          <el-input
            v-model="equipForm.property"
            style="width: 157px"
          ></el-input>
        </el-form-item>
        <el-form-item label="序列号">
          <el-input
            v-model="equipForm.sequence"
            style="width: 157px"
          ></el-input>
        </el-form-item>
        <el-form-item label="类别">
          <el-select
            v-model="equipForm.type"
            placeholder="请选择"
            style="width: 157px"
          >
            <el-option
              v-for="item in type"
              :key="item"
              :label="item"
              :value="item || ''"
              >{{ item }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="设备状态">
          <el-select
            v-model="equipForm.status"
            placeholder="请选择"
            style="width: 157px"
          >
            <el-option
              v-for="item in status"
              :key="item"
              :label="item"
              :value="item || ''"
              >{{ item }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="使用状态">
          <el-select
            v-model="equipForm.mode"
            placeholder="请选择"
            style="width: 157px"
          >
            <el-option
              v-for="item in mode"
              :key="item"
              :label="item"
              :value="item || ''"
              >{{ item }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input
            v-model="equipForm.principal"
            style="width: 157px"
          ></el-input>
        </el-form-item>
        <el-form-item label="品牌">
          <el-input
            v-model="equipForm.trademark"
            style="width: 157px"
          ></el-input>
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="equipForm.model" style="width: 157px"></el-input>
        </el-form-item>
        <el-form-item label="设备等级">
          <el-select
            v-model="equipForm.level"
            placeholder="请选择"
            style="width: 157px"
          >
            <el-option
              v-for="item in level"
              :key="item"
              :label="item"
              :value="item || ''"
              >{{ item }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="位置">
          <el-input
            v-model="equipForm.position"
            style="width: 157px"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="性别">
          <el-radio-group v-model="equipForm.sex">
            <el-radio label="1">男</el-radio>
            <el-radio label="0">女</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="购置时间">
          <el-date-picker
            v-model="equipForm.buy_time"
            type="day"
            placeholder="选择"
            style="width: 157px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="采购金额">
          <el-input v-model="equipForm.cost" style="width: 157px"></el-input>
        </el-form-item>
        <el-form-item label="保修时间">
          <el-date-picker
            v-model="equipForm.guarantee"
            type="day"
            placeholder="选择"
            style="width: 157px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="启用时间">
          <el-date-picker
            v-model="equipForm.commission"
            type="day"
            placeholder="选择"
            style="width: 157px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="预计报废时间">
          <el-date-picker
            v-model="equipForm.scrap"
            type="day"
            placeholder="选择"
            style="width: 157px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="equipForm.remark" style="width: 157px"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right">
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { page, create, update, equipDelete } from "../api/manage";
import dayjs from "dayjs";
export default {
  name: "User",
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      query: { limit: 10, page: 1 },
      tableData: [{}],
      tableDataTotal: 0,
      tableLoading: true,
      editDialogShow: false,
      equipForm: { roles: [] },
      equipFormRules: {
        // username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        // name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        // roles: [{ required: true, message: "请选择角色", trigger: "blur" }],
      },
      roles: [{}],
      isAdd: true,
      type: [
        "轧制",
        "工艺设备",
        "切割设备",
        "塑料注射成型机",
        "生产设备",
        "办公设备",
        "精整",
        "其他设备",
      ],
      status: ["正常", "带病运行", "故障"],
      mode: ["在用", "出租", "禁用"],
      level: ["A(关键)", "B(重要)", "C(一般)"],
    };
  },
  created() {
    this.page();
  },
  methods: {
    handlechange(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleClose(done) {
      this.$refs.upload.clearFiles();
      this.dialogImageUrl = "";
    },
    handleSuccess(res, file, fileList) {
      // console.log(res);
      if (res.success) {
        this.equipForm.pic = res.url;
        // console.log(this.equipForm.pic);
        //  console.log(this.equipForm);
        if (this.isAdd) {
          // this.dialogImageUrl = "";
          this.create();
        } else {
          // this.dialogImageUrl = "";
          this.update();
        }
        // this.dialogImageUrl=''
        // this.$refs.upload.clearFiles()
      }

      // if(isAdd==1){
      //   this.create();
      //   this.$refs.upload.clearFiles()
      //   // this.$refs.upload.submit();
      //   this.dialogImageUrl=''
      // }else if(isAdd==2){
      //   this.update();
      //   this.$refs.upload.clearFiles()
      //   this.dialogImageUrl=''
      // }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    addequip() {
      this.isAdd = true;
      this.editDialogShow = true;
      this.equipForm = { roles: [] };
      this.dialogImageUrl = ''
    },
    editequip(index, equip) {
      this.isAdd = false;
      this.editDialogShow = true;
      this.equipForm = { ...equip };
      // console.log(this.equipForm);
      this.dialogImageUrl = this.equipForm.pic
    },
    deleteequip(index, equip) {
      this.$confirm(`删除用户【${equip.name}】, 是否继续?`, "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        equipDelete({ id: equip.id })
          .then((res) => {
            if (res.success) {
              this.$message({ type: "success", message: "删除成功!" });
              this.page();
            } else {
              this.$message.error("删除失败！");
            }
          })
          .catch(() => this.$message.error("删除失败！"));
      });
    },
    submitQuery() {
      this.page();
    },
    resetQuery() {
      this.query = { limit: 10, page: 1 };
      this.page();
    },
    onSubmit() {
      this.equipForm.buy_time = dayjs(this.equipForm.buy_time).format(
        "YYYY-MM"
      );
      this.equipForm.guarantee = dayjs(this.equipForm.guarantee).format(
        "YYYY-MM"
      );
      this.equipForm.commission = dayjs(this.equipForm.commission).format(
        "YYYY-MM"
      );
      this.equipForm.scrap = dayjs(this.equipForm.scrap).format("YYYY-MM");
      this.$refs.equipFormRules.validate((valid) => {
        if (valid) {
          if (this.isAdd) {
            this.$refs.upload.submit();
            // this.create();
          } else {
            this.$refs.upload.submit();
            // this.update();
          }
        } else {
          return false;
        }
      });
    },
    handleSizeChange(val) {
      this.query.limit = val;
      this.page();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.page();
    },
    page() {
      this.tableLoading = true;
      page(this.query)
        .then((res) => {
          if (res.success) {
            this.tableData = res.data.rows;
            this.tableDataTotal = res.data.count;
            this.tableLoading = false;
          }
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    create() {
      create(this.equipForm)
        .then((res) => {
          if (res.success) {
            this.$message({ message: "添加成功！", type: "success" });
            this.editDialogShow = false;
            this.page();
          } else {
            this.$message.error(res.data);
          }
        })
        .catch(() => this.$message.error("添加失败！"));
    },
    update() {
      update(this.equipForm)
        .then((res) => {
          // console.log(res);
          if (res.success) {
            this.$message({ message: "修改成功！", type: "success" });
            this.editDialogShow = false;
            this.page();
          } else {
            this.$message.error(res.data);
          }
        })
        .catch(() => this.$message.error("修改失败！"));
    },
  },
};
</script>
